<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>翱翔留言板</title>
  <link rel="stylesheet" href="/static/w3/css/index.css">
</head>
<body>
  <div class="container">
    <div class="title">
      <h3>翱翔留言板</h3>
      <span class="weather">北京 雷阵雨转小雨</span>
    </div>

    <div class="form-group">
      <input id="user" type="text" class="form-control" placeholder="请输入昵称">
    </div>
    <div class="form-group">
      <textarea id="text" class="form-control" cols="30" rows="8" placeholder="请输入留言信息..."></textarea>
    </div>
    <div class="form-group">
      <button class="btn btn-default">提交</button>
    </div>

    <div class="messages">
      <div class="title">
        最新留言(5)
      </div>
      <div class="list">
        <div class="message">
          <div class="box">
            <img src="/static/w3/images/1.webp" alt="">
            <div class="item">
              <div class="user">张三</div>
              <div class="content">今儿天气不错</div>
            </div>
          </div>
          <span class="time">5秒前</span>
          <span class="close">X</span>
        </div>

       <!-- <div class="message">
          <div class="box">
            <img src="/static/w3/images/2.webp" alt="">
            <div class="item">
              <div class="user">凤姐</div>
              <div class="content">今儿天气不错</div>
            </div>
          </div>
          <span class="time">1分钟前</span>
          <span class="close">X</span>
        </div>-->
      </div>
    </div>
  </div>
  <!--格式化时间函数,使用第三方库-->
  <script src="/static/w3/scripts/lib/dayjs.js"></script>
<!--引入dayjs的插件relativeTime-->
  <script src="/static/w3/scripts/lib/relativeTime.js"></script>
<!--引入汉化包-->
  <script src="/static/w3/scripts/lib/zh-cn.js"></script>

  <script>
  //这个汉化用不了
  //使用汉化包
  dayjs.locale('zh_ch');
  //注册dayjs插件
  dayjs.extend(window.dayjs_plugin_relativeTime);

  //存储所有的留言数据
  //读取本地存储中的数据,如果为空，就初始化为数组
  let messages=JSON.parse(localStorage.getItem('messages'))||[];
 // let messages=[
    /*{
      name:'张三',
      icon:'/static/w3/images/2.webp',
      time:'2022-08-23 12:12:12',
      text:'天气不错'
    },
    {
      name:'凤姐',
      icon:'/static/w3/images/2.webp',
      time:'2022-08-23 12:12:12',
      text:'天气不错'
    },*/
 // ];
  function loadMsgs() {
    //1.更改最新留言条数
    let title=document.querySelector(".messages .title");
    title.textContent=`最新留言（${messages.length}）`;

    console.log(messages);
    //2.动态渲染留言列表
    let html='';
    for(let i=0;i<messages.length;i++){
      let msg=`
        <div class="message">
          <div class="box">
            <img src="${messages[i].icon}" alt="">
            <div class="item">
              <div class="user">${messages[i].name}</div>
              <div class="content">${messages[i].text}</div>
            </div>
          </div>
          <span class="time">${dayjs().to(dayjs(messages[i].time))}</span>



          <span class="close">X</span>
        </div>`
        ;
      html=html+msg;
    }
    //获取存储信息列表的list
    let list=document.querySelector('.list');
    list.innerHTML=html;

    //在列表渲染完毕之后，获取所有的关闭按钮，注册点击事件
    //4.删除留言
    let btns=document.querySelectorAll(".close");
    for(let i=0;i<btns.length;i++){
      btns[i].onclick=function (){
        //此处的i就是当前留言，对应的数组索引
        //根据索引从数组中删除元素
        messages.splice(i,1);

        //保存留言数据
        saveMessages();
        //重新加载列表
        loadMsgs();
      }
    }
  }
  //渲染留言列表
  loadMsgs()

  //3.发送留言

  //获取按钮，给按钮注册点击事件
  let btn=document.querySelector(".btn");
  btn.onclick=function (){
    //获取文本框中输入的内容，获取到的是don对象dom.value
    let user=document.querySelector("#user");
    let text=document.querySelector("#text");

    console.log(user.value);
    //往数组中添加元素，可以使用push方法
    messages.push({
      name:user.value,
      icon:"/static/w3/images/2.webp",
      text:text.value,
      time:new Date()
    });

    //本地存储
    saveMessages();

    //重新加载列表
    loadMsgs()
    //清空文本框
    user.value='';
    text.value='';
  };
  //使用本地存储保留留言数据
  function saveMessages() {
    //把messages数组转换成JSON形式的字符串
    let jsonStr=JSON.stringify(messages);
    localStorage.setItem('messages',jsonStr)

  }




</script>
</body>
</html>